<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-12 15:02:33
 * @LastEditTime: 2020-08-19 16:06:05
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="container">
    <HeadNav title="上传头像"/>
    <div class="flex">
      <van-uploader :after-read="afterRead" v-model="fileList" :max-count="1" :max-size="5 * 1024 * 1024" @oversize="onOversize">
          <van-button icon="plus" type="info">选择头像</van-button>
      </van-uploader>
    </div>
    <div class="flex">
        <van-button v-if="fileList.length" type="info" icon="" @click="upload">上传</van-button>
    </div>
    <!-- 裁剪部分 -->
    <transition name="van-slide-up">
        <div class="show_cropper" v-show="show_crop">
            <vueCropper
            ref="cropper"
            v-bind="option"
            >
            </vueCropper>
            <div class="flex_btn">
                <van-button type="default"  @click.stop="cancel">取消</van-button>
                <van-button type="info"  @click.stop="crop">确认</van-button>
            </div>
        </div>
    </transition>
  </div>
</template>

<script>
export default {
    data() {
        return {
            option:{
                img:'',
                outputSize:1,
                outputType:'png',
                autoCrop:true,//默认截图框，默认开启截图
                autoCropWidth:200,
                autoCropHeight:200,
            },
            fileList:[],
            before_crop_file:'',//裁剪之前的图片文件
            after_crop_file:'',//裁剪之后的图片,接口上传的文件
            show_crop:false,//开启裁剪
        };
    },
    methods: {
        // 限制大小
        onOversize(file){
            this.$toast('文件大小不能超过 5M');
        },
        // 选择后
        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            this.before_crop_file = file.file;
            // 将文件转化为url
            const url = URL.createObjectURL(this.before_crop_file);
            Object.assign(this.option,{img:url});
            this.fileList = [];
            this.show_crop = true;
        },
        cancel(){
            this.fileList = [];
            this.show_crop = false;
        },
        // 裁剪
        crop(){
            //this.$refs.cropper.startCrop() //开始截图
            // 获取截图的blob数据
            this.$refs.cropper.getCropBlob((data) => {
                // do something
                console.log(data)  
                this.toFile(data);
                this.show_crop = false;
            })
        },
        // 转换成file文件格式
        toFile(blob){
            this.after_crop_file = new window.File([blob], this.before_crop_file.name, {type: 'image/png'});
            const url = URL.createObjectURL(blob);
            this.$set(this.fileList,0,{url:url,isImage:true})
        },
        // 上传
        upload(){
            this.$set(this.fileList,0,{...this.fileList[0],status:'uploading'})
            setTimeout(()=>{
                this.$set(this.fileList,0,{...this.fileList[0],status:'done'})
                this.$toast("上传成功")
            },1000)
            // 实际
            // const formData = new FormData();
            // formData.append('file',this.after_crop_file);
            // console.log("this.$api",this.$api);
            // this.$api.upload(formData).then(res=>{
            //     this.$set(this.fileList,0,{...this.fileList[0],status:'done'})
            // })
        }
    }
};
</script>
<style lang="less">
.van-uploader__preview{
  margin-right: 0;
}
.flex{
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex_btn{
    position: absolute;
    bottom: 60px;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.show_cropper{
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.container{
    padding-top: 120px;
}
</style>
